<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Martin Debug Page</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      const map = new maplibregl.Map({
        container: 'map',
        style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
        zoom: 0,
        center: [0, 0]
      });

      map.on('load', function () {
        map.addSource('points', {
          type: 'vector',
          url: `http://0.0.0.0:3000/points1,points2`
        });

        map.addLayer({
          id: 'red_points',
          type: 'circle',
          source: 'points',
          'source-layer': 'points1',
          paint: {
            'circle-color': 'red'
          }
        });

        map.on('click', 'red_points', function (event) {
          console.log(event.features);
        });

        map.addLayer({
          id: 'blue_points',
          type: 'circle',
          source: 'points',
          'source-layer': 'points2',
          paint: {
            'circle-color': 'blue'
          }
        });

        map.on('click', 'blue_points', function (event) {
          console.log(event.features);
        });
      });
    </script>
  </body>
</html>
